<template>
	<view
		class="main-box"
		@touchmove.stop.prevent="handleTouchmove"
		@touchend="handleTouchend">
		<view
			class="main"
			:style="{
				transform: `translate(${mapImageInfo.left}px,${mapImageInfo.top}px) scale(${mapImageInfo.scale}) translateZ(0)`,
			}">
			<up-image
				:src="mapUrl"
				mode="scaleToFill"
				:height="mapImageInfo.height"
				:width="mapImageInfo.width"></up-image>
			<view
				v-if="
					(deviceStore.zonesList.length && type != 'manage') ||
					(deviceStore.selZone.length && type == 'addTask')
				">
				<MapZone
				   v-show="showZone"
					:list="
						type == 'addTask'
							? deviceStore.selZone
							: deviceStore.zonesList
					" />
				<MapRoute
					v-show="showPath"
					:type="type"
					:mapImageInfo="mapImageInfo" />
				<view v-show="type !== 'addTask'">
					<up-avatar
						shape="square"
						:src="posImg"
						mode="aspectFill"
						class="icon-p"
						:size="positionIconStyle.width"
						:style="positionIconStyle"
						v-show="
							positionIconStyle.left.length > 0 ||
							positionIconStyle.top.length > 0
						" />

					<img
						src="/static/image/device/stop.png"
						:style="selShopStyle"
						class="icon-p selShopPosition"
						v-show="
							selShopStyle.left.length > 0 ||
							selShopStyle.top.length
						" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useDeviceStore } from "@/stores/device";
import { useMapImage } from "@/utils/device";
import MapRoute from "@/components/MapRoute/index.vue";
import MapZone from "@/components/MapZone/index.vue";
import { nextTick } from "process";
import { useDeviceInfo } from "@/utils/getDeviceInfo";
import { onShow } from "@dcloudio/uni-app";
const {
	getNewMapImg,
	mapImageInfo,
	handleTouchmove,
	handleTouchend,
	positionIconStyle,
	selShopStyle,
	getPos,
	getNewZonesImg,
} = useMapImage();
const deviceStore = useDeviceStore();

const props = withDefaults(
	defineProps<{
		mapUrl?: string;
		showPath?: boolean;
		type?: string;
		taskZone?: ZoneDisplay;
		taskPathList?: PathItem;
		showZone?:boolean;
	}>(),
	{
		showPath: true,
		showZone:true,
		type: "index",
	}
);
const mapUrl = ref("");
const topHeight = ref("0");
const posImg = resolveStaticPath("image/device/device-potion.png");
watch(
	() => deviceStore.devicePosition,
	(val: any, oldVal) => {
		if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
			getPos(val);
		}
	},
	{ deep: true }
);
watch(
	() => props.taskZone,
	(val: any, oldVal) => {
		if (val && val.length) {
			getNewZonesImg(val, 1);
			console.log(val);
		}
	},
	{ immediate: true, deep: true }
);

watch(
	() => [
		mapImageInfo.value,
		deviceStore.zonesList,
		positionIconStyle,
		selShopStyle,
		props.showPath,
		deviceStore.selZone,
	],
	() => {},
	{ immediate: true, deep: true }
);
onMounted(() => {
	// 获取状态栏高度
	// #ifdef APP-PLUS
	const statusBarHeight = ref(0);
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight || 0;
	topHeight.value = statusBarHeight.value + "px";
	// #endif
	const showUrl =
		deviceStore?.defaultDeviceMap?.map_info.map_docs[0].oss_url || "";
	mapUrl.value = props.mapUrl ? props.mapUrl : showUrl;
	getNewMapImg(mapUrl.value);
});
</script>

<style lang="scss" scoped>
.main,
.main-box {
	width: 100%;
	height: 100%;
}

.main-box {
	background: #cdcdcd;
	position: relative;
	/* #ifdef APP-PLUS */
	overflow: hidden;
	/* #endif */
	/* #ifdef H5 */
	overflow: auto;
	/* #endif */
}
.icon-p {
	position: absolute;
	z-index: 4;
}

image {
	will-change: transform;
}
</style>
